iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0

建造者模式藉由將物件的建構流程和目標對象分離,讓物件的建構過程更有彈性。

生活案例

一間汽車製造工廠生產著各式各樣的的汽車,每款汽車都由不同的零件組成,例如引擎、車體和輪胎。組裝人員根據汽車的型號選擇相應的零件進行組裝。這些不同型號的零件搭配,就像不同的汽車建造者一樣,指引組裝人員使用正確的零件來完成產品。

舉個例子

想像我們提供一項電腦組裝服務,根據客戶的需求選擇零件並進行組裝。我們提供兩種常見的配置:文書型電腦和平面設計電腦。電腦的組裝過程已經完全自動化,只要將電腦的規格交給自動化系統,便能依照指示生產出符合需求的電腦。

首先,定義電腦類別和電腦建造者介面,電腦建造者提供各種電腦配件的設定方法。

class Computer {
  constructor(
    public CPU: string,
    public RAM: string,
    public storage: string,
    public GPU: string
  ) {}

  displaySpecs() {
    console.log("Computer Specifications:");
    console.log(`  CPU: ${this.CPU}`);
    console.log(`  RAM: ${this.RAM}`);
    console.log(`  Storage: ${this.storage}`);
    console.log(`  GPU: ${this.GPU}\n`);
  }
}

interface ComputerBuilder {
  setCPU(): void;
  setRAM(): void;
  setStorage(): void;
  setGPU(): void;
  build(): Computer;
}

定義文書型電腦建造者。這個建造者預先定義了適合文書型電腦的配件,以便快速生產文書型電腦。

class OfficePCBuilder implements ComputerBuilder {
  private CPU: string;
  private RAM: string;
  private storage: string;
  private GPU: string;

  setCPU() {
    this.CPU = "Intel i5-12400";
  }

  setRAM() {
    this.RAM = "16GB DDR4";
  }

  setStorage() {
    this.storage = "512GB SSD";
  }

  setGPU() {
    this.GPU = "Integrated Intel UHD Graphics 730";
  }

  build() {
    return new Computer(this.CPU, this.RAM, this.storage, this.GPU);
  }
}

接著,定義自動化生產系統。使用者可以指派不同的建造者來生產不同的電腦。

class ComputerDirector {
  constructor(private builder: ComputerBuilder) {}

  construct(): Computer {
    this.builder.setCPU();
    this.builder.setGPU();
    this.builder.setStorage();
    this.builder.setRAM();

    return this.builder.build();
  }
}

測試自動化生產系統。

class ComputerDirectorTestDrive {
  static main() {
    const officePCDirector = new ComputerDirector(new OfficePCBuilder());
    const graphicDesignPCDirector = new ComputerDirector(
      new GraphicDesignPCBuilder()
    );

    const officePC = officePCDirector.construct();
    const graphicDesignPC = graphicDesignPCDirector.construct();

    officePC.displaySpecs();
    graphicDesignPC.displaySpecs();
  }
}

ComputerDirectorTestDrive.main();

定義

Builder Pattern

  • 指揮者(Director): 負責使用建造者來建立產品
  • 建造者介面(Builder): 定義產品屬性的設置方法
  • 建造者(ConcreteBuilder): 提供具體的屬性設置方法
  • 產品(Product): 最終建立的物件

建造者模式通過將物件的建構流程和對象分離,使整個過程更具彈性。使用者可以逐步設定產品的屬性,並靈活地控制產品的生成時機。此外,使用者還可以預先定義各種建造者,來快速生產不同配置的產品。

總結

  • 將物件的建構流程和對象分離,使建構過程更有彈性
  • 使用者可以逐步設定產品的屬性,並靈活地控制產品的生成時機
  • 客戶端程式可以使用不同的建造者來建立不同版本的物件

完整範例

https://github.com/chengen0612/design-patterns-typescript/blob/main/patterns/creational/builder.ts


上一篇
Day 14 - Prototype 原型
下一篇
Day 16 - Chain of Responsibility 責任鏈
系列文
前端也想學設計模式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言